<template>
	<view class="custom-tabbar">
		<!-- 首页 -->
		<view class="tabbar-item" @tap="switchTab('/pages/index/index')">
			<image
				:src="selected === 0 ? '/static/images/@2x_home.png' : '/static/images/@2x_home_line.png'"
				class="tabbar-icon" mode="aspectFit"></image>
			<text :class="selected === 0 ? 'tabbar-text active' : 'tabbar-text'">首页</text>
		</view>

		<!-- 中间凸出按钮 -->
		<view class="tabbar-center" @tap="switchTab('/pages/rescue/rescue/rescue')">
			<view class="center-btn">
				<image src="/static/images/示警.png" class="center-icon" mode="aspectFit"></image>
			</view>
			
		</view>

		<!-- 我的 -->
		<view class="tabbar-item" @tap="switchTab('/pages/my/my')">
			<image :src="selected === 2 ? '/static/images/@2x_my.png' : '/static/images/@2x_my_line.png'"
				class="tabbar-icon" mode="aspectFit"></image>
			<text :class="selected === 2 ? 'tabbar-text active' : 'tabbar-text'">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: 0, // 当前选中的 Tab 索引（0：首页，1：应急救援，2：我的）
				tabPaths: [
					'/pages/index/index', // 首页路径
					'/pages/rescue/rescue', // 应急救援路径
					'/pages/my/my' // 我的路径
				]
			}
		},
		methods: {
			switchTab(path) {
				// 获取当前要跳转的 Tab 索引
				const currentIndex = this.tabPaths.indexOf(path);
				this.selected = currentIndex; // 更新选中状态

				// 跳转到 Tab 页面（uni.switchTab 仅能跳转到 pages.json 中配置的 Tab 页）
				uni.switchTab({
					url: path,
					fail: (err) => {
						console.error('Tab 页跳转失败：', err);
					}
				});
			}
		}
	}
</script>

<style scoped>
	/* 整体 TabBar 容器 */
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		/* 整体高度（预留中间按钮“凸出”空间） */
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		/* 元素靠底部对齐，配合中间按钮的“凸出” */
		background-color: #fff;
		border-top: 1rpx solid #eaeaea;
		z-index: 999;
		/* 保证在最上层 */
		padding-bottom: 10rpx;
		/* 底部内边距，避免过于贴底 */
	}

	/* 左右 Tab 项（首页、我的） */
	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		/* 平分剩余空间 */
	}

	.tabbar-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.tabbar-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}

	/* 选中时的文字样式 */
	.tabbar-text.active {
		color: #2176F3;
		/* 可根据设计调整选中色 */
	}

	/* 中间凸出按钮 */
	.tabbar-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 70rpx;
		/* 让中间按钮更“凸出”（相对于左右项的底部） */
	}

	.center-btn {
		width: 100rpx;
		height: 100rpx;
		background-color: #ff6600;
		/* 中间按钮背景色，可自定义 */
		border-radius: 50%;
		/* 圆形 */
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		/* 阴影增强立体感 */
	}

	.center-icon {
		width: 60rpx;
		height: 60rpx;
		
	}
</style>